<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        li{
            float: left;
            /*width: 100px;*/
            margin-left: 20px;
        }

        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            overflow: hidden;/*就没有超出了*/
            overflow: scroll;/*滚动条*/
        }
        img{
            width: 100px;
            /*设置行内元素的垂直对齐方式：基线对齐
            top上对齐 middle中间对齐 bottim下对齐 boseline基线对齐*/
            vertical-align: middle;

        }
    </style>

</head>
<body>

<ul>
    <li><a>首页</a></li>
    <li><a>免费课</a></li>
    <li><a>直播课</a></li>
    <li><a>精品课</a></li>
    <li><a>线上班</a></li>
    <li><a>线下班</a></li>
</ul>

<div>
    <input type="text"><img src="../day3_Img/1.png">
    <img src="../2图片.webp">
</div>

</body>
</html>